<template>
  <div>
    <!--  顶  -->
    <el-row>
      <h3 style="margin-left: 10px"><i class="el-icon-hot" style="color:rgb(48,176,143)"></i> 本店茶室
        <el-button type="text" @click="changeType" icon="el-icon-refresh-right">换规格</el-button>
      </h3>
      <!-- 有数据   -->
      <el-row v-if="isOk" :gutter="20">
        <el-col :span="6" v-for="item in houseList" :key="item.id">
          <el-card :body-style="{padding: '5px'}" shadow="hover">
            <el-row>
              <el-image @click="jump(item)" style="width: 355px;height: 150px; border-radius: 4px" fit="cover"
                        :src='"/api/fileserver/"+item.img'></el-image>
              <h4 @click="jump(item)">{{ item.name }}       <span class="content">{{ item.type }}</span> </h4>
              <span class="time">位置: {{ item.seat }}</span>
              <h3 class="viewCount">价格: {{ item.price }} 元</h3>
              <el-button style="color: red" @click="toRepair(item)" type="text">报修</el-button> <el-button style="margin-left: 50%" @click="jump(item)" type="text">订购</el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 无数据else-->
      <el-row v-else :gutter="20">
        <el-empty style="height: 210px" :description="'暂无'+ this.type +'型茶室'"></el-empty>
      </el-row>
    </el-row>

<!--  商品  -->
    <el-row>
      <h3 style="margin-left: 10px"><i class="el-icon-hot" style="color:rgb(48,176,143)"></i> 本店商品</h3>
      <!-- 有数据   -->
      <el-row v-if="isOk" :gutter="24">
        <el-col :span="3" v-for="item in goodsList" :key="item.id">
          <ul>
            <li>
              <!-- 1.image -->
              <a :href="item.url">
                <img src="https://img.zcool.cn/community/0175ce5d0f0997a801213ec289cfce.jpg@1280w_1l_2o_100sh.jpg" class="img">
              </a>
              <!-- 3.description -->
              <p class="desc">{{item.name}}</p>
              <!-- 2.price -->
              <div class="price">
                <i>特卖价</i>
                ￥{{item.price.toFixed(2)}}
              </div>
              <el-button v-if="item.num ===1 " @click="attention(item)" plain type="danger" size="mini" round icon="el-icon-shopping-cart-2" style="margin: 10px 0 0 20%">售空</el-button>

              <el-button v-else  @click="buy(item)" plain size="mini" round icon="el-icon-shopping-cart-full" style="margin: 10px 0 0 20%">购买</el-button>

            </li>
          </ul>
        </el-col>
      </el-row>
      <!-- 无数据else-->
      <el-row v-else :gutter="20">
        <el-empty style="height: 210px" :description="'暂无商品'"></el-empty>
      </el-row>
    </el-row>




    <!-- 底部-->
    <h4><i class="el-icon-s-flag" style="color:rgb(48,176,143)"></i> 关于我们</h4>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="6">
              <i class="el-icon-mobile-phone" style="font-size: 60px;margin-top: 50px"></i>
            </el-col>
            <el-col :span="18">
              <div>
                <h3>茶道茶馆管理平台</h3>
                <p style="font-size: 12px"><em>平台更新与维护：
                 <span>
                   CSDN：m0_66477964
                 </span>
                </em></p>
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">
                    <h3>添加管理员，提供意见</h3>
                    <el-image src="" style="width: 200px;height: 200px"></el-image>
                  </div>
<!--                  <el-link style="color: #30B08F">点我 ></el-link>-->
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="6">
              <i class="el-icon-edit-outline" style="font-size: 60px;margin-top: 50px"></i>
            </el-col>
            <el-col :span="18">
              <div>
                <h3>上报茶室维修</h3>
                <p style="font-size: 12px"><em>及时上报，及时修理</em></p>
                <router-link target="_blank" to="/home/data">
                  <el-link style="color: #30B08F">发布 ></el-link>
                </router-link>

              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="6">
              <i class="el-icon-chat-dot-round" style="font-size: 60px;margin-top: 50px"></i>
            </el-col>
            <el-col :span="18">
              <div>
                <h3>作者</h3>
                <p style="font-size: 12px"><em>QQ：2959175211</em></p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!--  弹窗  -->
    <el-dialog title="订购详情" :visible.sync="isOpen" width="60%" center>
      <adopt-detail @apply="getApply" :itemDetail="itemDetail"></adopt-detail>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

<!--    报修弹窗     -->
    <el-dialog title="报修详情" :visible.sync="isRepair" width="60%" center>
      <el-form :model="repairForm" :rules="rules" ref="repairForm" label-width="100px">
        <el-form-item label="茶室" prop="name">
          <el-input disabled v-model="repairForm.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="repairForm.remark">
            <template slot="append">描述事件</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('repairForm')">确认</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/utils/api";
import AdoptDetail from "@/views/Volunteer/Order/adoptDetail";


export default {
  name: "cmsIndex",
  components: {AdoptDetail},
  data() {
    return {
      activeNames: ['1'],
      helpNames: ['1'],
      sizeList: ["large", "medium", "small"],
      goodsList:{},
      i: 1,
      type:'',
      total: 0,
      userInfo: {},
      isOk: false,
      isOpen: false,
      isRepair:false,
      itemDetail: {},
      houseList: {},
      repairItem:{},
      repairForm:{},
      house:{
      },
      rules: {
        remark: [
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 2, max:20, message: '长度在 2 到 20个字符', trigger: 'blur'}
        ],
      },
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    this.findHouse()
    this.findGoods()
  },
  methods: {
    jump(item) {
      if (this.userInfo) {
        this.isOpen = true
        this.itemDetail = item
      } else {
        this.$message.error('请登录后操作哦')
      }
    },
    //报修部分接口
    toRepair(item){
      this.repairItem = item
      this.repairForm.name = item.name
      this.isRepair = true
    },
    add(repairForm) {
      this.$refs[repairForm].validate((valid) => {
        if (valid) {
          this.repairForm.house = this.repairItem.name
          this.repairForm.createName = this.userInfo.name
          this.repairForm.houseId = this.repairItem.id
          this.$axios.post('/api/com/addRepair', this.repairForm).then(res => {
            if (res.data.status === 1) {
              this.house.id = this.repairItem.id
              this.house.isUse = 3
              this.upApi()
              this.isRepair = false;
              this.findHouse()
            } else {
              this.$notify({
                title: '提示',
                message: res.data.message,
                type: 'error'
              })
            }
          })
        }else {
          return false
        }
      })
    },
    getApply(data) {
      this.isOpen = data.isOpen
      this.findHouse()
    },
    findHouse() {
      let param = {}
      param.page = 1
      param.size = 24
      param.isUse = 1
      param.branchId = this.userInfo.branchId
      console.log(param)
      this.$axios.get('/api/house/findHouse', {params: param}).then((res) => {
        if (res.data.status === 1) {
          // this.isOk = true
          this.houseList = res.data.data.list
          this.isOk = this.houseList.length !== 0;
        }
      })
    },

    findGoods() {
      let param = {}
      param.status = 1
      this.$axios.get('/api/com/findCom', {params: param}).then(res => {
        if( res.data.status === 1){
          this.goodsList = res.data.data.list
        }else {
          this.$notify({
            title: '提示',
            message: '商品数据异常',
            type: 'error'
          });
        }
      }).catch(e => console.log(e));
    },
    buy(goods){
      console.log(goods.num)
      if (goods.num === 1){
       this.attention()
      }else {
        let good = {
          id:goods.id ,
          num:goods.num - 1
        }
        this.$axios.post('/api/com/upGoods', good).then(res => {
          if (res.data.status === 1) {
            this.$notify({
              title: '提示',
              message: '购买成功',
              type: 'success'
            });
            this.findGoods()
          } else {
            this.$notify({
              title: '提示',
              message: res.data.message,
              type: 'error'
            });
          }
        })
        let priceDate = {
          createUserName:this.userInfo.name,
          price:goods.price,
          remark:'购买:' + goods.name + '一盒',
          house: goods.name
        }
        //封装API方法 让页面简洁
        Api.upPrice(priceDate)
        //原始单页面请求api
        // this.$axios.post('/api/house/add', priceDate).then(res => {
        //   if (res.data.status === 1) {
        //     this.$notify({
        //       title: '提示',
        //       message: '资金入账成功',
        //       type: 'success'
        //     });
        //   }
        // })
      }
    },
    //补货
    attention(){
      this.$message.error('该商品已售空，联系管理员补货')
    },
    //茶室状态接口
    upApi(){
      this.$axios.post('/api/house/upHouse', this.house).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    changeType(){
      const typeList = ['','大','中','小']
      let param = {}
      param.page = 1
      param.size = 24
      param.type = typeList[this.i++ % (typeList.length)]
      this.type = param.type
      param.isUse = 1
      param.branchId = this.userInfo.branchId
      console.log(param)
      this.$axios.get('/api/house/findHouse', {params: param}).then((res) => {
        if (res.data.status === 1) {
          this.houseList = res.data.data.list
          console.log(this.houseList.length)
          this.isOk = this.houseList.length !== 0;
        }
      })
    },

  }
};
</script>

<style lang="scss" scoped>
#sector {
  width: 100%;
  height: 100px;
  margin: 0 auto;
}

.content {
  margin-left: 10px;
  font-size: 20px;
}

.bottom {
  font-size: 13px;
  color: #999;
}

.bottom-right {
  margin-left: 20%;
  font-size: 13px;
  color: #999;
}

.comm {
  font-size: 10px;
  color: #1c1c1c;
}

.time {
  float: left;
  margin-left: 10%;
  font-family: cursive;
  font-size: x-small;
  color: #5a5e66
}

.viewCount {
  margin-left: 40%;
  font-family: cursive;
  font-size: x-small;
  color: #5a5e66
}

.content {
  font-family: cursive;
  font-size: 15px;
}

ul {
  width: auto;
  margin: 10px auto;
  background: #f3f4f5;
  list-style: none;
}

ul li {
  float: right;
  width: 135%;
  height: 220px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  margin: 10px 0 0 7px;
}

.img {
  width: 100%;
  height: 100px;
}

.price {
  margin: 15px 0 0 10px;
  font: bold 16px "Arial";
}

.price i {
  display: inline-block;
  width: 45px;
  height: 15px;
  background-image: repeating-linear-gradient(90deg, #dc459f 0, #cc75d8 100%);
  color: #ffffff;
  font: 11px/15px "微软雅黑";
  text-align: center;
  border-radius: 7.5px;

}

.desc {
  margin: 10px 15px 0 8px;
  font: 14px/16px "微软雅黑";
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.el-icon-hot {
  background: url("../../../img/hot.png") center no-repeat;
  background-size: cover;
  opacity: 0.9;
}

.el-icon-hot:before {
  content: "\e6e3";
  visibility: hidden;
}
</style>
